<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet"  href="../css/styles.css" />
    <title>上传文件</title>
    <style>
        .school:hover{
            cursor: pointer;
            background: #000;
        }
        .cho-sch{
            position: absolute;
            top:50%;
            left:50%;
            z-index:2000;
            background-color: #f8f8f8;;
            transform:translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
            /*-webkit-transform:translateY(-50%);*/
            display: none;
        }
        .mask{
            position: fixed;
            left: 0;
            top: 0;
            right:0;
            bottom:0;
            background-color: rgba(0,0,0,0.3);
            display: none;
            z-index:1000;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><span>Print</span>Cloud</a>

            <ul class="user-menu" style="margin:0;height:50px;line-height:50px;" >

                <li class="dropdown pull-right" style="display: inline-block;">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user">
                            </span> User <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <!--<li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>-->
                        <!--<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>-->
                        <li><a href="login.html"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
                    </ul>
                </li>
                <li style="display: inline-block;margin:0 30px 0 0;padding:0;height: 100%;">
                    <p class="push-right school" style="color:white;text-align: center"  >
                        山东大学
                    </p>
                </li>
            </ul>
        </div>

    </div><!-- /.container-fluid -->
</nav>

<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">

    <ul class="nav menu">
        <li class="parent">
            <a href="uploadFile.html">
                <span class="glyphicon glyphicon-book"></span> 文档打印
            </a>
        </li>
        <li class="parent ">
            <a href="uploadImage.html">
                <span class="glyphicon glyphicon-picture "></span> 照片打印 </a>
        </li>
        <li class="parent active">
            <a href="#">
                <span class="glyphicon glyphicon-list"></span> 我的订单 </a>
        </li>

        <li class="parent ">
            <a href="personInfo.html">
                <span class="glyphicon glyphicon-user"></span> 个人信息 </a>
        </li>

        <li class="parent ">
            <a href="download.html">
                <span class="glyphicon glyphicon-cloud-download"></span> 文件下载
            </a>
        </li>

        <li role="presentation" class="divider"></li>
        <li><a href="login.html"><span class="glyphicon glyphicon-log-out"></span> Login Page</a></li>
    </ul>
</div>

<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
            <li class="active">我的订单</li>
        </ol>
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="panel panel-info">
                <div class="panel-heading"  style="height:60px;line-height:40px;font-size: 18px;color:#14a6ef;">
                    待支付订单
                </div>
                <form class="form-horizontal" role="form" action="" method="post">
                    <div class="panel-body row" style="height:100%;">
                        <div class="col-md-2"></div>
                        <div class="col-md-8">
                            <div class="form-group">
                                <div class="col-md-3" style="margin-right:-20px;">
                                    <label for="phone" class="control-label">姓名：</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="name" placeholder="姓名">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-3" style="margin-right:-20px;">
                                    <label for="phone" class="control-label">手机号：</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="phone" placeholder="手机号">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-3" style="margin-right:-20px;">
                                    <label for="address" class="control-label">收货地址：</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="address" placeholder="收货地址">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-3" style="margin-right:-20px;">
                                    <label for="beizhu" class="control-label">备注：</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="beizhu" placeholder="备注">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2"></div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input  type="submit" class="btn btn-primary  btn-block"  value="确认修改">
                        </div>
                        <div class="col-md-4"></div>
                    </div>
                </form>
            </div>

            <div class="panel panel-info">
                <div class="panel-heading"  style="height:60px;line-height:40px;font-size: 18px;color:#14a6ef;">
                    已支付订单
                </div>
                <form class="form-horizontal"  id="subpasswd" role="form" action="./test.php" method="post">
                    <div class="panel-body row" style="height:100%;">
                        <div class="col-md-2"></div>
                        <div class="col-md-8">
                            <div class="form-group">
                                <div class="col-md-3" style="margin-right:-20px;">
                                    <label for="oldpasswd" class="control-label">旧密码：</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="password" class="form-control" id="oldpasswd" placeholder="旧密码">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-3" style="margin-right:-20px;">
                                    <label for="newpasswd" class="control-label">新密码：</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="password" class="form-control" id="newpasswd" placeholder="新密码">
                                </div>
                            </div>

                            <div class="form-group" id="repasswd">
                                <div class="col-md-3" style="margin-right:-20px;">
                                    <label for="renewpasswd" class="control-label">重复新密码：</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="password" onblur="check()" class="form-control" id="renewpasswd" placeholder="重复新密码">
                                </div>
                            </div>

                        </div>
                        <div class="col-md-2"></div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input  type="button" onclick="checkform()" class="btn btn-primary  btn-block"  value="确认修改">
                        </div>
                        <div class="col-md-4"></div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>

</div>

<div class="cho-sch" style="height: 225px;width:800px;text-align: center;font-weight: 400;color: #333;font-size: 1.6rem;line-height: 1.6;">
    <div class="row">
        <div class="col-md-12 ">学校选择
            <br>
            <br>
        </div>
        <div class="col-md-12 ">
            <ul  id="select_school_id" style="list-style: none;text-align: left;">
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=1&amp;page_type=1">东北农业大学</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=2&amp;page_type=1">哈尔滨工业大学</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=3&amp;page_type=1">东北林业大学</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=4&amp;page_type=1">牡丹江师范学院</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=5&amp;page_type=1">牡丹江医学院</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=6&amp;page_type=1">哈尔滨金融学院</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=7&amp;page_type=1">黑龙江大学</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=8&amp;page_type=1">齐齐哈尔大学</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="mask">

</div>

<script src="../bootstrap/js/jquery-3.1.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
    !function ($) {
        $(document).on("click","ul.nav li.parent > a > span.icon", function(){
            $(this).find('em:first').toggleClass("glyphicon-minus");
        });
        $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
    }(window.jQuery);

    $(window).on('resize', function () {
        if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
    });
    $(window).on('resize', function () {
        if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
    })

</script>
<script>
    $('.school').click(function(){
        $('.mask').show();
        $('.cho-sch').css('display','block');
    });
    $('.mask').click(function(){
        $('.mask').hide();
        $('.cho-sch').css('display','none');
    });

</script>
<script>

    //检查两次输入的新密码是否相同，不同的话修改css样式
    function check(){
        var newpasswd=$('#newpasswd').val();
        var renewpasswd=$('#renewpasswd').val();
        if(newpasswd!=renewpasswd){
            $("#repasswd").addClass("has-error");
        }else{
            $("#repasswd").removeClass("has-error");
        }
    }

    //验证修改密码表单是否符合两次新密码相同，以及密码不为空
    function checkform(){
        var newpasswd=$('#newpasswd').val();
        var renewpasswd=$('#renewpasswd').val();
        if(newpasswd==renewpasswd && newpasswd!=''){
            $("#subpasswd").submit();
        }else if(newpasswd!=renewpasswd){
            alert("您两次输入的新密码不相同！");
            return false;
        }else if(newpasswd==''){
            alert("请输入新密码！");
            return false;
        }else{
            return false;
        }
    }

</script>
</body>

</html>